<template>
    
    <div class="container">
        <p>
            header
        </p>
        <p>
            footer
        </p>
    </div>
<div class="con">
        <!-- 导航栏 -->
        <header class="d-flex flex-wrap align-items-center justify-content-center py-3  border-bottom">
            <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
                <li>
                    <a href="#" class="nav-link px-2 link-secondary ">留言板</a>
                </li>
                <li>
                    <a href="#" class="nav-link px-2 link-secondary">热点文章</a>
                </li>
            </ul>
        </header>

        <!-- 页面主容器 -->
        <div class="container">
            <main>
                <!-- 文章内容 -->
                <div class="py-5 text-center">
                    <img class="d-block mx-auto" src="./assets/img/banner.png">
                    <p class="lead mx-auto" style="max-width: 980px; line-height: 2;">
                        福建省，简称“闽”，是中华人民共和国省级行政区。省会福州，位于中国东南沿海，东北与浙江省毗邻，西北与江西省接界，西南与广东省相连，东南隔台湾海峡与台湾省相望，陆地总面积12.4万平方千米
                    </p>
                </div>

                <!-- 留言列表 -->
                <div class="py-5">
                    <h2 class="pt-2 pb-3 title">
                        <div class="line"></div>
                        <span> 留言列表 </span>
                    </h2>

                    <div class="d-flex text-muted mb-3">
                        <div class=" border-bottom col-md-12">
                            <img src="./assets/img/female.png" alt="" width="24" height="24">
                            <strong class="text-gray-dark">李小萌</strong>
                            <p>绝少有地方能像福州的三坊七巷一样，随便一脚踏下去，你的脚印就必然和某一位风云人物的足迹重合。</p>
                        </div>
                    </div>
                    <div class="d-flex text-muted mb-3">
                        <div class=" border-bottom col-md-12">
                            <img src="./assets/img/male.png" alt="" width="24" height="24">
                            <strong class="text-gray-dark">王小跳</strong>
                            <p>武夷山不仅是5A级景区，更是有着浓郁的地方文化,这里的茶文化令人着迷。</p>
                        </div>
                    </div>
                    <div class="d-flex text-muted mb-3">
                        <div class=" border-bottom col-md-12">
                            <img src="./assets/img/male.png" alt="" width="24" height="24">
                            <strong class="text-gray-dark">张全全</strong>
                            <p>鼓浪屿岛上海礁嶙峋，岸线迤逦，山峦叠翠，峰岩跌宕。</p>
                        </div>
                    </div>
                </div>

                <!-- 发表留言 -->
                <div class="col-md-12">
                    <h2 class="pt-2 pb-3 title">
                        <div class="line"></div>
                        <span> 发表留言 </span>
                    </h2>
                    <form class="needs-validation">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="name" class="form-label">姓名:</label>
                                <input type="text" class="form-control" id="name" placeholder="您的姓名" required>
                            </div>

                            <div class="col-12">
                                <label for="email" class="form-label">邮箱:</label>
                                <input type="email" class="form-control" id="email" placeholder="name@email.com"
                                    required>
                            </div>

                            <div class="col-12">
                                <div>
                                    <p class="form-label">性别:</p>
                                    <div class="form-check">
                                        <input id="male" name="gender" type="radio" class="form-check-input" required>
                                        <label class="form-check-label" for="male">男</label>
                                    </div>
                                    <div class="form-check">
                                        <input id="female" name="gender" type="radio" class="form-check-input">
                                        <label class="form-check-label" for="female">女</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 py-2">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="unnamed-switch">
                                    <label for="unnamed-switch">匿名评论</label>
                                </div>
                            </div>

                            <div class="col-12 py-2">
                                <input
                                    class="list-group-item list-group-item-action list-group-item-success form-control"
                                    placeholder="姓名,男性,name@email.com">
                            </div>

                            <div class="col-12">
                                <label class="form-label">留言内容:</label>
                                <textarea class="form-control" name="" id="" cols="30" rows="5"
                                    placeholder="请输入您要发表的内容">
                                </textarea>
                            </div>

                            <div class="col-12 py-2">
                                <p class="list-group-item list-group-item-action list-group-item-warning">
                                    输入内容不少于20个字符
                                </p>
                            </div>
                        </div>
                        <hr class="my-4">
                        <button class="w-100 btn btn-success btn-lg" type="submit">提交</button>
                    </form>
                </div>

            </main>
        </div>

        <!-- 底部栏 -->
        <footer class="py-5 text-muted text-center text-small">
            <p>© 2020-2032</p>
        </footer>

    </div>
     <!-- 网页背景 -->
     <div class="top_banner">
        <img src="./assets/img/topbanner.png" alt="">
    </div>      
</template>
<style>
@import url(./assets/css/bootstrap.css);
</style>